---
title: "最小宽度"
# description: "Utilities for setting the minimum width of an element"
description: "用来设置元素最小宽度的功能类"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/minWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 使用方法

<!-- Set the minimum width of an element using the `min-w-0` or `min-w-full` utilities. -->
使用 `min-w-0` 或 `min-w-full` 功能类设置元素的最小宽度。

```html indigo
<template preview>
  <div class="w-24 min-w-full mx-auto rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">
    min-w-full
  </div>
</template>

<div class="w-24 **min-w-full** ...">
  min-w-full
</div>
```

---

## 响应式

<!-- To control the min-width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing min-width utility. -->
要在特定的断点处控制元素的最小宽度，请在任何现有的最小宽度功能类前添加 `{screen}:` 前缀。

```html
<div class="w-24 min-w-full **md:min-w-0** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

---

## 定制

### Min-width scale

<!-- Customize Tailwind's default min-width scale in the `theme.minWidth` section of your `tailwind.config.js` file. -->
在您的 `tailwind.config.js` 文件的 `theme.minWidth` 部分定制 Tailwind 的默认最小宽度。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      minWidth: {
+       '0': '0',
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
+       'full': '100%',
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在 [主题自定义文档](/docs/theme#customizing-the-default-theme) 中了解更多关于自定义默认主题的信息。

### 变体

<Variants plugin="minWidth" name="min-width" />

### 禁用

<Disabling plugin="minWidth" name="min-width" />
